<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>坐标定位工具 - 高德地图</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            border: none;
        }
        .card-header {
            background-color: #f1f8ff;
            font-weight: bold;
        }
        #mapContainer {
            width: 100%;
            height: 500px;
            border-radius: 8px;
        }
        .btn-primary {
            background-color: #3498db;
            border: none;
        }
        .btn-primary:hover {
            background-color: #2980b9;
        }
        .example-list {
            list-style-type: none;
            padding: 0;
        }
        .example-list li {
            padding: 8px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .example-list li:hover {
            background-color: #f1f8ff;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9em;
        }
        @media (max-width: 768px) {
            #mapContainer {
                height: 300px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header text-center">
        <h1>坐标定位工具</h1>
        <p class="lead">基于高德地图API，输入经纬度即可精确定位</p>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    坐标输入
                </div>
                <div class="card-body">
                    <form id="coordinateForm">
                        <div class="mb-3">
                            <label for="longitude" class="form-label">经度</label>
                            <input type="text" class="form-control" id="longitude" placeholder="例如: 116.397428" required>
                        </div>
                        <div class="mb-3">
                            <label for="latitude" class="form-label">纬度</label>
                            <input type="text" class="form-control" id="latitude" placeholder="例如: 39.90923" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">定位</button>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    常用坐标示例
                </div>
                <div class="card-body">
                    <ul class="example-list">
                        <li data-lon="116.397428" data-lat="39.90923">北京天安门</li>
                        <li data-lon="121.472641" data-lat="31.231706">上海东方明珠</li>
                        <li data-lon="113.264385" data-lat="23.129112">广州塔</li>
                        <li data-lon="114.171202" data-lat="22.300576">深圳福田</li>
                        <li data-lon="106.550464" data-lat="29.563761">重庆解放碑</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    地图显示
                </div>
                <div class="card-body">
                    <div id="mapContainer"></div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    位置信息
                </div>
                <div class="card-body">
                    <div id="locationInfo">等待坐标输入...</div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>© 2023 坐标定位工具 | 基于高德地图API开发</p>
        <p>仅用于学习和演示目的</p>
    </div>
</div>

<!-- 高德地图API -->
<script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图API密钥"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<script>
    // 初始化地图
    var map = new AMap.Map('mapContainer', {
        zoom: 13,
        resizeEnable: true
    });

    // 添加工具条、比例尺等控件
    map.addControl(new AMap.ToolBar());
    map.addControl(new AMap.Scale());

    // 标记对象
    var marker = null;

    // 表单提交事件
    document.getElementById('coordinateForm').addEventListener('submit', function(e) {
        e.preventDefault();

        var longitude = parseFloat(document.getElementById('longitude').value);
        var latitude = parseFloat(document.getElementById('latitude').value);

        if (isNaN(longitude) || isNaN(latitude)) {
            alert('请输入有效的经纬度数值！');
            return;
        }

        // 检查坐标是否在中国范围内
        if (longitude < 73.66 || longitude > 135.05 || latitude < 3.86 || latitude > 53.55) {
            if (!confirm('该坐标可能不在中国境内，是否继续显示？')) {
                return;
            }
        }

        // 清除旧标记
        if (marker) {
            map.remove(marker);
        }

        // 设置地图中心点
        map.setCenter([longitude, latitude]);

        // 添加标记
        marker = new AMap.Marker({
            position: [longitude, latitude],
            map: map
        });

        // 使用逆地理编码获取地址信息
        AMap.service('AMap.Geocoder', function() {
            var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: 'all'
            });

            geocoder.getAddress([longitude, latitude], function(status, result) {
                var address = "无法获取地址信息";
                if (status === 'complete' && result.regeocode) {
                    address = result.regeocode.formattedAddress;
                }

                // 显示位置信息
                document.getElementById('locationInfo').innerHTML = `
                    <strong>经纬度：</strong>${longitude.toFixed(6)}, ${latitude.toFixed(6)}<br>
                    <strong>地址：</strong>${address}
                `;

                // 添加信息窗口
                var infoWindow = new AMap.InfoWindow({
                    content: `<div style="padding:5px;">
                        <div>经纬度: ${longitude.toFixed(6)}, ${latitude.toFixed(6)}</div>
                        <div>地址: ${address}</div>
                    </div>`,
                    offset: new AMap.Pixel(0, -30)
                });

                infoWindow.open(map, [longitude, latitude]);
            });
        });
    });

    // 示例坐标点击事件
    var examples = document.querySelectorAll('.example-list li');
    examples.forEach(function(item) {
        item.addEventListener('click', function() {
            var lon = this.getAttribute('data-lon');
            var lat = this.getAttribute('data-lat');

            document.getElementById('longitude').value = lon;
            document.getElementById('latitude').value = lat;

            // 触发表单提交
            document.getElementById('coordinateForm').dispatchEvent(new Event('submit'));
        });
    });

    // 默认显示北京
    document.getElementById('longitude').value = "116.397428";
    document.getElementById('latitude').value = "39.90923";
    document.getElementById('coordinateForm').dispatchEvent(new Event('submit'));
</script>
</body>
</html>